<template>
	<view class="choiceBank">
		<navBar title="选择开户银行" isBack color="#fff" backColor="#fff" background="#333"></navBar>
		<!-- <view class="search">
			<input confirm-type="search" type="text" value="" placeholder-style="font: 400 28rpx/40rpx PingFang SC;color: #CBAF87;" placeholder-class="iconfont icon-search inputStyle" placeholder=" 查找银行"/>
		</view> -->
		<view class="cardList">
			<u-index-list :scrollTop="scrollTop" :offset-top="navHeight" z-index="1" >
					<view v-for="(item, index) in list" :key="index">
						<u-index-anchor :index="item[0].first" />
						<view class="list-cell"  v-for="(item1,index1) in item" :key="index1" @click="selectBank(item1)">
							{{item1.bank_name}}
						</view>
					</view>
			</u-index-list>
		</view>
	</view>
</template>

<script>
	import vPinyin from '../../components/vue-py/vue-py.js'
	import navBar from '@/components/navBar/navBar.vue'
	import service_distri from '@/service/distri.js'
	export default{
		data(){
			return{
				scrollSort: null,
				scrollTop:0,
				cardList:[],
				selectIndex:null,
				list: [],
				names:[],
				navHeight:184,
				FristPin: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H','I', 'J', 'K', 'L', 'M', 'N','O', 'P', 'Q', 'R', 'S', 'T','U','V', 'W', 'X', 'Y', 'Z'],
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			this.navHeight = this.$store.state.system.navBarHeight*2
			this.getBankCard()
		},
		methods:{
			// 获取银行卡列表
			getBankCard(){
				service_distri.getBankCard().then(res=>{
					console.log(res,'银行卡列表')
					if(res.code==1){
						let arr = []
						
						
						var itemArr = [];
						for (let i = 0; i < res.data.list.length; i++) {
							//遍历数组,拿到文字名称
							let itemName = res.data.list[i].bank_name;
							//取全部文字的首字母
							let fristName = vPinyin.chineseToPinYin(res.data.list[i].bank_name); //这里截取首字母的第一位
							//给原json添加首字母键值对
							res.data.list[i].first = fristName;
							//放入新数组
							itemArr.push(res.data.list[i]);
						}
						console.log(itemArr,'000')
						
						let items = {};
						//根据首字母键值对给原数据按首字母分类
						for (let i = 0; i < this.FristPin.length; i++) {//这里的FirstPin是一个写入了所有字母的数组,见data中
							var thisFristPin = this.FristPin[i];
							items[this.FristPin[i]] = itemArr.filter(function(value) {
								return value.first === thisFristPin;
							});
						}
						console.log(items,'itemitem')
						let thisFirst = '';
						var nameArr = [];
						for (let i = 0; i < 26; i++) {//26个字母
							let thisLength = items[this.FristPin[i]].length;//当前首字母有几个同字母的字段
							if(thisLength > 0){//大于0，排除空数组
								// for(let j = 0 ;j < thisLength;j++){
								// 	let newFirst = items[this.FristPin[i]][j].first;//获取当前字母
								// 	if(thisFirst == newFirst){//判断当前字母和获取字母是否相同
								// 		nameArr.push(items[this.FristPin[i]][j].bank_name);
								// 		continue;
								// 	}else{
								// 		thisFirst = newFirst;
								// 		nameArr = [];
								// 		nameArr.push(items[this.FristPin[i]][j].bank_name)
								// 	}
									
								// 	this.list.push(newFirst);//输出结果
								// 	this.names.push(nameArr);
								// }
								this.list.push(items[this.FristPin[i]])
							}
						}
						console.log(this.list, this.names, '789')
						this.cardList = res.data.list?res.data.list:[]
						
					}
				})
			},
			
			// 选择银行卡
			selectBank(item){
				console.log(item,'银行卡信息')
			
				let bankInfo = {
					bank_id:item.bank_id,
					bank_name:item.bank_name
				}
				console.log(bankInfo,'+++++')
				let pages = getCurrentPages();  //获取所有页面栈实例列表
				console.log(pages)
				let nowPage = pages[ pages.length - 1];  //当前页页面实例
				let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
				console.log(prevPage)
				prevPage.$vm.bankInfo = bankInfo;
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.choiceBank{
		.search{
			width: 686rpx;
			height: 74rpx;
			background-color: #fff;
			border-radius: 44rpx;
			margin: 40rpx auto;
			input{
				width: 100%;
				padding: 0 30rpx;
				height: 100%;
				font: 400 28rpx/40rpx PingFang SC;color: #CBAF87;
			}
			// .searchIpt{font: 400 28rpx/40rpx PingFang SC;color: #CBAF87;}
		}
		.cardList{
			width: 100%;
		}
		.list-cell {
				display: flex;
				box-sizing: border-box;
				width: 100%;
				padding: 10px 24rpx;
				overflow: hidden;
				color: #323233;
				font-size: 14px;
				line-height: 24px;
				background-color: #fff;
			}
			.active{
				background-color: #CBAF87;
			}
			
			// .anchor-text {
			// 	color: #CBAF87;
			// }
	}
</style>
